<!--
 * 功能：表格
 * 作者：闫李壮
 * 日期：2024-06-04
-->
<template>
  <a-card :title="tableInfo.cardName">
    <!-- 额外操作栏，只有当configType为1时显示 -->
    <template #extra v-if="configType === 1">
      <time-bar @change="timeBarChange" isCurrentDateDisabled/>
    </template>
    <transition-table v-if="tableInfo.tableData?.length"
                      :data="tableInfo.tableData"
                      :columns="tableInfo.header">
    </transition-table>
    <a-empty v-else/>
  </a-card>
</template>
<script lang="ts" setup>
import {useRouter} from 'vue-router'
import {inject, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch} from 'vue';
import TransitionTable from '@/components/transition-table/index.vue'
import useLoading from '@/hooks/loading';
import {getChartInfo} from '@/api/dashboard/api';
import {getTimeObject} from "@/utils/charts";
import {SocketData} from "@/api/websocketService";
//加载中
const router = useRouter();

const props = defineProps({
  public: {
    type: Object,
    default: () => {
      return {}
    }
  },
  configType: {
    type: Number,
    default: 1,
  },
  // 设备编号, -------------------------------------------没有timeBar的组件一定要传
  deviceSn: {
    type: String,
    default: ''
  }
})
const {loading, setLoading} = useLoading(false);
const varSn = ref<any>('');
const tableInfo = reactive<any>({
  cardName: '',
  header: [],
  tableData: []
});
const timeOptions = ref<any>({});

// WebSocket 数据
const {data, sendData}: SocketData = inject('webSocketData', {
  data: {value: 0},
  sendData: () => {
  }
});

// 监听 WebSocket 数据
watch(data, async (newVal: any) => {
  if (newVal.key && newVal.key === varSn.value) {
    // await fetchData();
    console.log('告警', data)
  }
});

const timeBarChange = async (timer: any) => {
  timeOptions.value = timer;
  await fetchData();
}

const fetchData = async () => {
  try {
    setLoading(true);
    const params = {
      configId: props.public.dashboardConfigId,
      cardKey: props.public.cardKey,
      deviceSn: props.public.deviceSn,
      ...getTimeObject(timeOptions.value)
    };
    const res: any = await getChartInfo(params);
    if (res.code === 200 && res.data) {
      tableInfo.cardName = res.data.cardName;
      tableInfo.header = res.data.tableInfo.header;
      tableInfo.tableData = res.data.tableInfo.tableData;
    } else {
      tableInfo.cardName = '';
      tableInfo.header = [];
      tableInfo.tableData = [];
    }
  } catch (error) {
    console.error('获取图表数据时出错:', error);
  } finally {
    setLoading(false);
  }
}

defineExpose({
  timeBarChange
})
onMounted(() => {
  nextTick(() => {
    sendData({
      action: 'subscribe',
      bizSn: varSn.value
    });
  })
})
onBeforeUnmount(() => {
  sendData({
    action: 'unsubscribe',
    bizSn: varSn.value
  });
})
</script>
<style lang="less" scoped>
@border-color: var(--color-border-2);
.arco-card {
  width: 100%;
  height: 100%;
  /* 调整卡片组件高度 */

  :deep(.arco-card-body) {
    height: calc(100% - 46px);
    padding: 0;
    overflow: hidden;
  }
}

.arco-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
</style>
